<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module">
        import '../../build/ref-lit.js';

        const {defineComponent, html} = window.$ref_lit;

        defineComponent('ref-child', {name: ''},
            ({ref, props, html}) => {
                ref.title = 'Child Component';
                return () => html`
                    <h3>${ref.title}</h3>
                    <p>name: ${props.name}</p>
                `
            });

        defineComponent('ref-parent', {},
            ({ref, onMounted, onUnmounted, onRendered, beforeRendered}) => {

                onMounted(() => {
                    console.log('onMounted');
                });

                onUnmounted(() => {
                    console.log('onUnmounted');
                });

                onRendered(() => {
                    console.log('onRendered');
                });

                beforeRendered(() => {
                    console.log('beforeRendered');
                });

                console.log('beforeCreated')

                ref.name = 'ryan';
                ref.age = 20;
                ref.childName = 'Node';

                let renderedTimes = 1;

                function onAgeClick() {
                    ref.age++;
                }

                function onNameClick() {
                    ref.name += 'click';
                    ref.age += 2;
                    ref.childName += '1';
                }

                function onTimeClick() {
                    renderedTimes += 10;
                }

                console.log('created');

                return () => html`
                            <h1>Parent</h1>
                            <p @click=${onNameClick}>name: ${ref.name}</p>
                            <p @click=${onAgeClick}>age: ${ref.age}</p>
                            <p @click=${onTimeClick}>rendered times: ${renderedTimes++}</p>
                            <div>
                                <ref-child name=${ref.childName}></ref-child>
                            </div>
                        `
            }
        );

    </script>
</head>
<body>
<div id="box">
    <ref-parent></ref-parent>
</div>
</body>
</html>